.body{
    background-color: #C96B5F;
}
.main {
    .headcard {
        width: 750px;
        height: 398px;
        // color: white;
        // background: linear-gradient(163.83deg,
        //         rgba(228, 231, 253, 0.4) 0%,
        //         rgba(192, 201, 240, 0.4) 100%);
        // background-color: #C96B5F;
        position: relative;

        .head-tips {
            width: 48px;
            height: 48px;
            // background: red;
            position: absolute;
            right: 32px;
            img {
                width: 48px;
                height: 48px;
            }
        }

        .hbox {
            width: 682px;
            height: 336px;
            // background: linear-gradient(160.15deg,
            //         rgba(225, 229, 255, 1) 0%,
            //         rgba(187, 197, 243, 1) 100%);
            background-color: #e5c184;
            position: absolute;
            left: 50%;
            // bottom: -80px;
            bottom:-20px;
            transform: translateX(-50%);
            border-radius: 26px;
            padding: 30px 32px 0;

            .hbox-head {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 62px;
                font-weight: 750;

                .hbox-head-left {
                    font-size: 28px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    font-weight: 750;
                    // color: rgba(132, 144, 177, 1);
                }

                .hbox-head-right {
                    width: 38px;
                    height: 38px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // color: #fff;
                    color: white;
                    font-size: 20px;
                }
            }

            .inputbox {
                width: 100%;
                position: relative;
                display: flex;
                align-items: center;
                margin-bottom: 30px;

                .input {
                    width: 370px;
                    height: 105px;
                    border: 2px solid rgba(255, 255, 255, 1);
                    border-radius: 20px;
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    padding: 0 32px;
                    font-size: 30px;
                    font-weight: 700;
                    letter-spacing: 0px;
                    // color: rgba(171, 182, 212, 1);
                    color: #93653e;
                    max-width: 370px;
                    overflow: auto;
                    position: relative;
                    input {
                        width: 100%;
                        height: 100%;
                        background: transparent;
                        border: none;
                        outline: none;
                    }
                    &::before {
                        content: '';
                        display: block;
                        position: absolute;
                        width: 305px;
                        height: 100%;
                        top: 0;
                        z-index: 2;
                    }
                }

                .input-txt {
                    font-size: 28px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    color: rgba(132, 144, 177, 1);
                }

                .input-icon {
                    width: 140px;
                    height: 140px;
                    box-shadow: inset 0px 3px 7px 0px rgba(135, 149, 210, 1);
                    border-radius: 50%;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    font-size: 70px;
                    font-weight: 800;
                }
            }

            .hbox-tips {
                font-size: 24px;
                font-weight: 400;
                letter-spacing: 0px;
                // color: rgba(242, 244, 255, 1);
                font-weight: 750;
            }

            &.recharge {
                .inputbox {
                    justify-content: space-between;
                    margin-bottom: 30px;

                    .input {
                        width: 457px;
                        max-width: 457px;
                        justify-content: space-between;
                        padding-right: 18px;

                        .inputvalue {
                            max-width: 400px;
                            overflow: auto;
                            height: 100px;
                            display: flex;
                            align-items: center;
                        }

                        .icon {
                            width: 38px;
                            height: 38px;
//                            background: url(https://img.js.design/assets/img/627d1942fe1aaf11ac9f3085.png) center/38px 38px;
                            margin-left: 20px;
                            flex-shrink: 0;
                        }
                    }

                    .ib-r {
                        display: flex;
                        align-items: center;

                        .ib-r-img {
                            width: 72px;
                            height: 72px;
                            border-radius: 10px;
                            overflow: hidden;
                            margin-right: 15px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .xiala {
                            width: 48px;
                            height: 48px;
                            background: url('~@/assets/img/select-right.png') center/48px 48px;
                        }
                    }
                }

                .hbox-tips {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .etcs {
                        font-size: 24px;
                        font-weight: 400;
                        // color: rgba(255, 255, 255, 1);
                        color: white;
                        width: 157px;
                        opacity: 1;
                        background: rgba(173, 183, 230, 1);
                        user-select: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 10px;
                        // margin-top: 25px;
                        // font-size: 28px;
                        // font-weight: 400;
                        letter-spacing: 2.24px;
                        color: rgba(255, 255, 255, 1);
                        // width: 100%;
                        height: 70px;
                        // background: url("~@/assets/img/ucenter-info-t3.png") center/100% 71px no-repeat;
                        background: url("~@/assets/img/19.png") center/100% 71px no-repeat;
                        // display: flex;
                        // align-items: center;
                        // justify-content: center;
                        // padding-bottom: 8px;
                    }
                }
            }
        }
        .tipshow {
  
            bottom:-1.667vw;
          }
    }
}